<template>
  <div id="app">
    <div class="fixed" v-if="$route.meta.showFixed">
      <HeaderDown />
      <!-- <KeepAlive> -->
        <div id="nav">
          <router-link to="/" :songId="songId"
            ><span>推荐音乐</span></router-link
          >
          <!-- <router-link to="/hot"><span>热歌榜</span></router-link> -->
          <router-link to="/ranking"><span>排行榜</span></router-link>
          <router-link to="/search"><span>搜索</span></router-link>
        </div>
      <!-- </KeepAlive> -->
    </div>
    <!-- <KeepAlive> -->
    <router-view
      :class="{ view: $route.meta.showFixed, playing: songId != null }"
      @play-audio="playAudio"
      :songId="songId"
      :playing="playing"
      @exit-lyrics="exitLyrics"
      @on-playing="onplaying"
      @on-pause="onpause"
      :currentTime="currentTime"
      :duration="duration"
      @updata-current-time="updataCurrentTime"
      @play-list="playList"
      @is-play-list="isPlayList = !isPlayList"
      :playLists="playLists"
      :currentType="currentType"
      @toggle-type="toggleType"
      @play-all="playAll"
    />
    <!-- </KeepAlive> -->
    <audio
      ref="audio"
      :src="musicUrl"
      autoplay
      style="height: 50px"
      @durationchange="durationchange"
      @timeupdate="timeupdate"
    ></audio>
    <PlayBar
      :songId="songId"
      v-if="songId && isEject"
      @pause-btn="pauseBtn"
      @play-btn="playBtn"
      :playing="playing"
      @eject-lyric="ejectLyricPage"
      @is-play-list="isPlayList = !isPlayList"
      @back-play-list="backPlayList"
      :currentTime="currentTime"
      :duration="duration"
    />
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/minireset.css/0.0.2/minireset.min.css"
    />
    <EjectList
      :isPlayList="isPlayList"
      :playLists="playLists"
      @is-play-list="isPlayList = !isPlayList"
      @play-audio="playAudio"
      @back-play-list="backPlayList"
      :NewesArr="NewesArr"
      :playing="playing"
      :songId="songId"
    />
  </div>
</template>

<script>
import HeaderDown from "./components/HeaderDown.vue";
import PlayBar from "./components/PlayBar.vue";
import EjectList from "./components/EjectList.vue";

export default {
  components: {
    HeaderDown,
    PlayBar,
    EjectList,
  },
  data() {
    return {
      musicUrl: null,
      songId: null,
      playing: false,
      isEject: true,
      currentTime: null,
      duration: null,
      playLists: {},
      isPlayList: false,
      NewesArr: [],
      currentType: "list",
    };
  },
  methods: {
    playAudio(id) {
      this.songId = id;
      this.playing = true;
    },
    pauseBtn() {
      this.playing = false;
    },
    playBtn() {
      this.playing = true;
    },
    ejectLyricPage(v) {
      this.isPlayList = false;
      this.isEject = v;
      window.localStorage.setItem("isEject", "true");
    },
    exitLyrics() {
      this.isEject = true;
      // this.playing = true;
      let lyricFrom = window.localStorage.getItem("lyricFrom");
      this.$router.push({ path: lyricFrom });
    },
    onpause(b) {
      this.playing = b;
    },
    onplaying(b) {
      this.playing = b;
    },
    durationchange() {
      this.duration = this.$refs.audio.duration;
    },
    timeupdate() {
      this.currentTime = this.$refs.audio.currentTime;
    },
    updataCurrentTime(val) {
      this.$refs.audio.currentTime = val;
    },
    playList(obj) {
      this.playLists = obj;
    },
    backPlayList() {
      this.isPlayList = false;
    },
    toggleType(type) {
      this.currentType = type;
    },
    playAll({ id, type, listInfo }) {
      this.songId = id;
      this.currentType = type;
      this.playing = true;
      this.playLists = listInfo;
    },
  },
  watch: {
    playing(n) {
      if (n) {
        this.$refs.audio.play();
      } else {
        this.$refs.audio.pause();
      }
    },
    currentTime() {
      if (this.$refs.audio.ended) {
        if (this.playLists.tracks) {
          let idx = this.playLists.tracks
            .map((item) => {
              if (item.id == this.songId) {
                return item.id;
              }
            })
            .indexOf(this.songId);
          switch (this.currentType) {
            case "order":
              if (idx != -1) {
                if (idx == this.playLists.tracks.length - 1) {
                  this.playing = !this.$refs.audio.ended;
                } else {
                  this.songId = this.playLists.tracks[idx + 1].id;
                }
              }
              this.$refs.audio.load();
              break;
            case "single":
              this.playLists.tracks.forEach((item) => {
                if (item.id == this.songId) {
                  this.$refs.audio.loop = true;
                  this.$refs.audio.load();
                }
              });
              this.$refs.audio.loop = false;
              break;
            case "random":
              var ran = parseInt(Math.random() * this.playLists.tracks.length);
              this.playLists.tracks.forEach(() => {
                while (this.playLists.tracks[ran].id == this.songId) {
                  ran = parseInt(Math.random() * this.playLists.tracks.length);
                }
                this.songId = this.playLists.tracks[ran].id;
              });
              this.$refs.audio.load();
              break;
            case "list":
              this.$refs.audio.load();
              if (idx != -1) {
                if (idx == this.playLists.tracks.length - 1) {
                  this.songId = this.playLists.tracks[0].id;
                } else {
                  this.songId = this.playLists.tracks[idx + 1].id;
                }
              }
              break;
          }
        } else {
          let idx = this.playLists
            .map((item) => {
              if (item.id == this.songId) {
                return item.id;
              }
            })
            .indexOf(this.songId);
          switch (this.currentType) {
            case "order":
              if (idx != -1) {
                if (idx == this.playLists.length - 1) {
                  this.playing = !this.$refs.audio.ended;
                } else {
                  this.songId = this.playLists[idx + 1].id;
                }
              }
              this.$refs.audio.load();
              break;
            case "single":
              this.playLists.forEach((item) => {
                if (item.id == this.songId) {
                  this.$refs.audio.loop = true;
                  this.$refs.audio.load();
                }
              });
              this.$refs.audio.loop = false;
              break;
            case "random":
              var ranB = parseInt(Math.random() * this.playLists.length);
              this.playLists.forEach(() => {
                while (this.playLists[ranB].id == this.songId) {
                  ranB = parseInt(Math.random() * this.playLists.length);
                }
                this.songId = this.playLists[ranB].id;
              });
              this.$refs.audio.load();
              break;
            case "list":
              this.$refs.audio.load();
              if (idx != -1) {
                if (idx == this.playLists.length - 1) {
                  this.songId = this.playLists[0].id;
                } else {
                  this.songId = this.playLists[idx + 1].id;
                }
              }
              break;
          }
        }
      }
    },
    songId(id) {
      this.axios
        .get("https://apis.netstart.cn/music/song/url?id=" + id)
        .then((res) => {
          this.musicUrl = res.data.data[0].url;
        });
    },
  },
};
</script>
<style lang="less">
@red: #dd001b;

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.auto-img {
  width: 100%;
  height: auto;
  display: block;
}
.fixed {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}
.playing {
  padding-bottom: 50px;
}
.view {
  margin-top: 130px;
}
#nav {
  display: flex;
  a {
    color: #2c3e50;
    text-decoration: none;
    width: 30vw;
    flex: 1;
    background: white;
    display: block;

    span {
      line-height: 40px;
      height: 40px;
      display: inline-block;
      font-size: 15px;
    }
    &.router-link-exact-active {
      box-sizing: border-box;
    }
    &.router-link-exact-active span {
      color: @red;
      border-bottom: 3px solid @red;
      padding: 0 7px;
    }
  }
}
</style>
